<template>
  <div class="order_set_top">
    <div>
      <div>
        <div>西安大都会店<van-icon name="arrow" /></div>
        <div>距离您12.3km，请确认下单门店是否正确</div>
      </div>
      <div>
        <span
          @click="changeState"
          :class="changeS ? 'order_set_top-active' : ''"
          >自取</span
        >
        <span
          @click="changeState"
          :class="changeS ? '' : 'order_set_top-active'"
          >外卖</span
        >
      </div>
    </div>
    <div>
      <div>联系电话</div>
      <div>152xxxx0900</div>
    </div>
    <div>
      <div>取餐时间</div>
      <div class="in-no-time">立即取餐</div>
    </div>
    <van-radio-group v-model="radio" direction="horizontal">
      <van-radio
        style="width: 40%; textalign: center"
        checked-color="#a7d500"
        name="1"
        >店内堂食</van-radio
      >
      <van-radio style="width: 40%" checked-color="#a7d500" name="2"
        >打包带走</van-radio
      >
    </van-radio-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: "1",
      changeS: true,
    };
  },
  methods: {
    changeState() {
      this.changeS = !this.changeS;
      console.log(this.changeS);
    },
  },
};
</script>
<style scoped>
.order_set_top {
  width: 96%;
  margin: 2vw auto;
  background-color: white;
  padding: 0 3vw;
  box-sizing: border-box;
  border-radius: 2vw;
  font-size: 4vw;
}
.order_set_top > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4vw 0;
  border-bottom: 1px solid #e2e5e7;
}
.order_set_top > div:last-child {
  border: none;
}
.order_set_top > div:nth-child(1) {
  border-bottom: 1px solid #e2e5e7;
  /* padding: 0 0 3vw; */
}
.order_set_top > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
  font-size: 4vw;
}
.order_set_top > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) {
  font-size: 3vw;
  color: #a0a4a7;
}
.order_set_top > div:nth-child(1) > div:nth-child(2) {
  background-color: #f5f5f5;
  width: 24vw;
  height: 10vw;
  line-height: 10vw;
  border-radius: 7vw;
  font-size: 3vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.order_set_top > div:nth-child(1) > div:nth-child(2) > span {
  width: 50%;
  text-align: center;
  height: 9vw;
}
.order_set_top-active {
  border-radius: 4.5vw;
  background-color: #242524;
  color: white;
}
.order_set_top > div:nth-child(3) .in-no-time {
  color: #a7d500;
}
.order_set_top > div:last-child > div:nth-child(1) ::v-deep .van-radio__icon {
  margin-left: 12vw;
}
.order_set_top > div:last-child > div:nth-child(2) ::v-deep .van-radio__icon {
  margin-left: 4vw;
}
.order_set_top > div:last-child {
  position: relative;
}
.order_set_top > div:last-child::after {
  content: "";
  display: block;
  height: 100%;
  border-left: 1px solid #e2e5e7;
  position: absolute;
  left: 50%;
}
</style>